import React, { FC, useState, useEffect, useRef } from 'react'
import QeustionCard from '../../components/QuestionCard'
import type { PropsType } from '../../components/QuestionCard'
import ListSearch from '../../components/ListSearch'
import styles from './common.module.scss'
import { useTitle, useDebounceFn } from 'ahooks'
import { Typography } from 'antd'
import { useSearchParams } from 'react-router-dom'
// import useLoadQuestionList from '../../hooks/useLoadQuestionList'
// import { getQuestionListService } from '../../services/question'

const { Title } = Typography

const List: FC = () => {
  useTitle('我的问卷')

  const [list, setList] = useState([])
  // const [page, setPage] = useState(1)
  // const [total, setTotal] = useState(0)
  // const haveMoreData = total > list.length
  const loadMoreRef = useRef<HTMLDivElement>(null)

  const [searchParams] = useSearchParams()
  // const tryLoadMore = () => {
  //   console.log()
  // }
  // 页面加载或keyword变化时
  const { run: tryLoadMore } = useDebounceFn(() => {
    const ele = loadMoreRef.current
    if (ele == null) return
    const domRect = ele.getBoundingClientRect()
    if (domRect == null) return
    const { bottom } = domRect
    console.log(bottom, document.body.clientHeight)
    if (bottom <= document.body.clientHeight) {
      console.log('11')
    }
  }, {
    wait: 1000
  })
  useEffect(() => {
    tryLoadMore()
  }, [searchParams])
  
  useEffect(() => {
    setList([])
    // if (haveMoreData) {
      window.addEventListener('scroll', tryLoadMore)
    // }
    return () => {
      window.removeEventListener('scroll', tryLoadMore)
    }
  }, [searchParams])

  return (
    <>
      <div className={styles.header}>
        <div className={styles.left}>
          <Title level={3}>我的问卷</Title>
        </div>
        <div className={styles.right}>
          <ListSearch />
        </div>
      </div>
      <div className={styles.centent}>
        <div style={{height: '2000px'}}></div>
        {/* <div style={{'textAlign': 'center'}}>
          {loading && <Spin style={{margin: '20px'}} />}
        </div> */}
        {list.length ? list.map((item: PropsType) => {
          const { _id } = item
          return <QeustionCard key={_id} {...item} />
        }) : []}
      </div>
      <div className={styles.footer}>
        <div ref={loadMoreRef}>
        loadmore... 上滑加载更多
        </div>
      </div>
    </>
  )
}

export default List